<template>
    <div class="nav-container">
        <!--<img class="nav-left" src="../../assets/nav/menu.png" @click="handleLeft" alt="">-->
        <p class="nav-title" :style="mgTop" @click="showPicker = true">
            <span>{{ title }}</span>
            <img class="nav-down" src="../../assets/nav/down.png" alt="">
        </p>

        <van-popup v-model="showPicker" round position="bottom">
            <van-picker
                class="nav-picker"
                :columns="teamOption"
                :default-index="defaultIndex"
                :item-height="60"
                @change="handleChange"
            />
            <div class="nav-container-footer">
                <button class="nav-container-close" @click="showPicker = false">取消</button>
                <button class="nav-container-confirm" solt="confirm" @click="handleConfirm">确定</button>
            </div>
        </van-popup>
    </div>
</template>

<script>
export default {
    props: {
        // title: {
        //     type: String,
        //     default: ''
        // }
    },
    data () {
        return {
            title: '',
            showPicker: false,
            pickerVal: '',
            teamOption: [{ no: '', text: '全部车队' }],
            defaultIndex: ''
        }
    },
    mounted () {
        this.init()
    },
    computed: {
        mgTop () {
            let mgTop = 'margin-top: 120px'
            if (this.$store.state.iosType == 1) {
                mgTop = 'margin-top: 93px'
            } else if (this.$store.state.iosType == 2) {
                mgTop = 'margin-top: 115px'
            }
            return mgTop
        }
    },
    methods: {
        /* 初始化 */
        async init () {
            setTimeout(async () => {
                await this.getTeamOption()
            }, 50)
            this.getDefaultIndex()
        },

        /* 车队下拉*/
        async getTeamOption () {
            let _ = this
            try {
                const res = await _.$H.get(_, _.$A.team.findAppTeamList, {})
                if (res.status == 200) {
                    for (let v of res.data) {
                        let obj = {
                            no: v.teamNo,
                            text: v.teamName
                        }
                        _.teamOption.push(obj)
                    }
                }
                console.log('index-nav-team getTeamOption', _.teamOption)
                if (_.$store.state.selTeam == '') {
                    _.title = _.teamOption[0].text
                    _.pickerVal = { teamName: _.teamOption[0].text, teamNo: _.teamOption[0].no }
                    this.$store.commit('setSelTeam', this.pickerVal)
                    console.log('index-nav-team selTeam == null', this.pickerVal)
                } else {
                    _.title = _.$store.state.selTeam.teamName
                    _.pickerVal = { teamName: _.$store.state.selTeam.teamName, teamNo: _.$store.state.selTeam.teamNo }
                    console.log('index-nav-team selTeam != null', this.pickerVal)
                }
            } catch (e) {
                _.$toast.fail(e.msg)
            }
        },

        /* 选项改变 */
        handleChange (picker, value, index) {
            console.log('handleChange', picker, value, index)
            this.pickerVal = { teamName: value.text, teamNo: value.no }
        },

        /* 车队 —— 确认按钮 */
        handleConfirm () {
            this.title = this.pickerVal.teamName
            this.$store.commit('setSelTeam', this.pickerVal)
            this.$emit('confirm', this.pickerVal)
            this.showPicker = false
            console.log('handleConfirm', this.pickerVal)
        },

        /* 获取默认选中项的索引 */
        getDefaultIndex () {
            let pickerVal = this.pickerVal
            this.defaultIndex = this.teamOption.findIndex(item => { return item.text == pickerVal.teamName })
        },

        /* 点击左侧按钮时触发的事件 */
        handleLeft () {
            this.$emit('click-left')
        }
    },
    watch: {
        title: function (newVal, oldVal) {
            this.getDefaultIndex()
        }
    }
}
</script>

<style lang="less" scoped>
.nav-container {
    width: 100%;
    margin: 0;
    padding: 0px 26px;
    box-sizing: border-box;
    .nav-left {
        width: 16px;
        height: 18px;
        display: block;
    }
    .nav-title {
        height: 33px;
        line-height: 33px;
        margin: 16px 0 0 0;
        padding: 0;
        font-size: 24px;
        font-weight: 600;
        color: #2D3748;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .nav-down {
        width: 10px;
        margin-left: 10px;
        display: block;
    }
}
.nav-picker {
    height: 254px;
    padding: 10px 0;
    overflow: hidden;
}
.nav-container-footer {
    padding: 10px 54px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .nav-container-close {
        margin: 0;
        padding: 0;
        font-size: 14px;
        color: #2D3748;
        border: none;
        background: transparent;
    }
    .nav-container-confirm {
        width: 170px;
        height: 56px;
        line-height: 56px;
        margin: 0;
        padding: 0;
        font-size: 14px;
        color: #FFFFFF;
        border: none;
        border-radius: 20px;
        background: linear-gradient(136deg,#6BBFFC 6%, #00D5E3 90%);
    }
}
</style>
